Overview

After completing the previous exercise, your app should now be populated with data for the food menu. However, you’re not done just yet. In this exercise, you will add sorting and filtering functionalities to your app to allow users to sort and filter the food menu.

Scenario

When users access the Home screen of the Little Lemon food ordering app, they’ll find a full list of all the items offered by the restaurant. But what if a user only wants to view a specific item, rather than navigating through everything or finding a particular dish by name? Fortunately, you can display only the results that match a search phrase.

Step 1: Filter menu items

• In the hero section inside the MainActivity class, add the TextField Composable for the search query input.

• Use the placeholder attribute of the TextField to define the "Enter search phrase" hint. The placeholder can accept a lambda containing a Text Composable placeholder = { Text("Enter Search Phrase") }

  Before the TextField Composable, define the searchPhrase variable using the remember function and the mutableStateOf delegate.

• Use the searchPhrase variable to set and get value from the TextField .

• To display menu items, pass the list of items to the MenuItems Composable. Before passing a list of items to the Composable, you need to filter items in the list using the filter function. This filtering should happen only if the search query is not blank.

Tip: The filter method returns a new collection.

Optionally you can add a magnifier glass icon to the search TextField . To do this, use the leadingIcon property of the TextField composable together with an Icon Composable:

leadingIcon = { Icon( imageVector = Icons.Default.Search, contentDescription = "") }

Step 2: Add Menu breakdown

There are multiple ways to filter the menu items. In fact, to develop the menu breakdown section you also use filtering. By using the category attribute present in the JSON you can break down the menu into categories such as Starters, Mains, Desserts and Drinks. When a user taps on a category button in the Menu breakdown section only menu items from the given category should display. Here are some recommendations on how to achieve this:

• Retrieve a list of menu items from the database.

• Group these menu items by category to unique category names and use them as names for the menu breakdown items.

• After a user taps on a menu breakdown button use Kotlin collection processing to filter menu items by the given category.

Design

You can use this mockup as inspiration, but your final outcome doesn’t have to exactly mirror it. Again, feel free to style based on your personal preferences.

Conclusion

In this exercise, you learned how to create a list of food menu items that can be filtered in your Little Lemon food ordering app. Now your app allows one to enter text in the search TextField and the menu items are filtered as users type. You also know how to develop category buttons in the Menu breakdown section that filters menu items according to categories.